<template>
    <div class="demo">    
        <h1>学生{{name}}{{age+1}}</h1>
    </div>
</template>

<script>
    export default {
        name:"MyStudent",
        data(){
            return {
                // 接受的属性要从这里删除掉
            }
        },
        // 接受外面的属性
        // 简单接受
        // 使用的最多的
        // 如果没有用props接受的话，则会跑到$Attrs里面去，而且是互斥的。
        props:['name','age'],
        // 接受的同时对类型进行限制
        // props:{
        //     name:String,
        //     age:Number
        // }
        // 最完整的接受属性
        // props:{
        //     name:{
        //         type:String,
        //         required:true,
        //     },
        //     age:{
        //         type:String,
        //         // required和default只能2选1
        //         // required:false,
        //         default:99,
        //     },
        // }
        // 无法使用key来作为传入参数
        // props:['name','age','key']

    }
</script>

<style>
    /* 同名的子组件的样式会被父组件覆盖掉 */
    .demo{
        background-color: darkblue;
        color:white;
    }
</style>
